import type { Property } from 'csstype';
import { Component } from 'solid-js';
import { useTheme } from 'solid-styled-components';
import { Styleable } from 'src/app/models/styleable';

interface AtWalletIconProps extends Styleable {
    fill?: Property.Color;
}

export const AtWalletIcon: Component<AtWalletIconProps> = props => {
    const theme = useTheme();
    const fill = (): string => props.fill || theme.colors.constant.white;

    return (
        <svg width="28" height="28" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4412">
            <path d="M417.28 795.733333l11.946667-180.48 327.68-295.253333c14.506667-13.226667-2.986667-19.626667-22.186667-8.106667L330.24 567.466667 155.306667 512c-37.546667-10.666667-37.973333-36.693333 8.533333-55.466667l681.386667-262.826666c31.146667-14.08 61.013333 7.68 49.066666 55.466666l-116.053333 546.56c-8.106667 38.826667-31.573333 48.213333-64 30.293334L537.6 695.466667l-84.906667 82.346666c-9.813333 9.813333-17.92 17.92-35.413333 17.92z" fill="#ffffff" p-id="4413"></path></svg>
        // <img width="28" height="28" src="https://wallet.tg/images/logo-288.png"></img>
        // <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
        // <path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 9.33337V23.3667L22.1927 25.6667H8.18143V21.0001H3.5V6.9999H8.18143V2.33333H17.5111L24.5 9.33337ZM19.8519 21V11.6667L15.1704 6.99999L8.18143 6.9999V21.0001L19.8519 21Z" fill="white"/>
        // </svg>
        
    );
};
